<template>
  <view class="body">
    <view
      class="top_nav"
      style="background: #000000"
      :style="{
        marginTop: `${statusBarHeight}px`
      }"
    >
      <view class="top_content">
        <view
          class="content_btn dis-flex flex-y-center flex-x-center"
          style="color: #ffffff; width: 750rpx; position: relative"
        >
          <u-image
            @click="routeTo('/uvideo/index')"
            src="@/static/spzx.png"
            width="40rpx"
            height="36rpx"
            style="margin-bottom: 4rpx; position: absolute; left: 20rpx"
          ></u-image>
          <view
            class="content_item"
            style="color: #ffffff; position: relative"
            @click="onTabSelect(0)"
          >
            <text class="item_title i_on" :style="navIndex == 0 ? 'color:#009A74' : 'color:#ffffff'"
              >直播</text
            >
          </view>
          <view
            class="content_item"
            style="color: #ffffff; position: relative"
            @click="onTabSelect(1)"
          >
            <text class="item_title i_on" :style="navIndex == 1 ? 'color:#009A74' : 'color:#ffffff'"
              >推荐</text
            >
          </view>
          <view
            class="content_item"
            style="color: #ffffff; position: relative"
            @click="onTabSelect(2)"
          >
            <text class="item_title i_on" :style="navIndex == 2 ? 'color:#009A74' : 'color:#ffffff'"
              >关注</text
            >
          </view>
        </view>
        <view class="search">
          <image
            class="img"
            src="/static/tabbar/query.png"
            v-if="navIndex == 1"
            @click="onQueryVideo()"
          >
          </image>
          <image class="img" src="/static/tabbar/query2.png" v-else @click="onQueryVideo()"></image>
        </view>
      </view>
    </view>
    <swiper
      :current="navIndex"
      @change="onChange"
      :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
    >
      <swiper-item ref="">
        <swiper
          :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
          @animationfinish="animationfinish"
          @change="onInnerChange"
          @transition="transitionY"
          :disable-touch="infi"
          circular
          class="inner-swiper"
          :vertical="true"
          :current="0"
        >
          <swiper-item
            ref="si"
            v-for="(item, i) in dataList"
            :key="i"
            :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
          >
            <view
              @disappear="stop()"
              style="width: 750rpx"
              :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
            >
              <!--  @tap="touchVideo(i)" -->
              <!-- 		<m-video ref="mVideo" :src="item.playUrl" :show-center-play-btn="true"
								:show-speed-rate-btn="false" @tap="touchVideo(i, $event, item)" :loop="true"
								token="XrcafDGyKnPi+9N2fmb87ErkppZq3E5XZSNebc+JnKg="></m-video> -->
              <video
                ref="mVideo"
                :controls="false"
                :autoplay="true"
                style="width: 100%; height: 100%"
                :show-fullscreen-btn="false"
                :src="item.playUrl"
              ></video>
              <view
                class="videoHover"
                style="top: 40%; z-index: 999"
                @click="tapVideoHover(i, $event, item)"
                :style="boxStyle"
              >
                <image v-if="pause" class="playState" src="/static/img/bf@2x.png"></image>
              </view>

              <!--  class="userInfo" v-if="dataList[m] && dataList[m].isShowProgressBarTime == false" -->
              <view class="userInfo" style="top: 33%">
                <!-- 1.头像  v-if="item.isShowProgressBarTime == false" -->
                <view class="avatarView" v-if="item.user" @click.stop.prevent="onSeller(item)">
                  <u-image
                    class="userAvatar"
                    border-radius="50%"
                    :src="item.user.avatar"
                    width="86rpx"
                    height="86rpx"
                  ></u-image>
                  <image
                    v-if="!item.follow"
                    @click.stop.prevent="onFollow(item)"
                    style="
                      position: absolute;
                      left: 32rpx;
                      bottom: 10rpx;
                      z-index: 999;
                      height: 35rpx;
                      width: 35rpx;
                    "
                    src="/static/img/gz.png"
                    mode=""
                  ></image>
                  <view class="" v-else> </view>
                </view>
                <!-- 2.点赞 -->
                <view class="rightCover" @click.stop.prevent="onLike(item)">
                  <image
                    class="coverFollow"
                    src="@/static/dzed.png"
                    mode="aspectFill"
                    v-if="item.liked"
                  ></image>
                  <image class="coverFollow" src="@/static/dz.png" mode="aspectFill" v-else></image>
                  <text class="followNum rtxt">{{ item.likedCount }}</text>
                </view>
                <!-- 3.评论 -->
                <view class="rightCover" @click.stop.prevent="toComment(item)">
                  <image class="commentIcon" src="@/static/pl.png"></image>
                  <text class="commentNum rtxt">{{ item.commentCount }}</text>
                </view>
                <!-- 4.收藏 -->
                <view class="rightCover" @click.stop.prevent="onCollet(item)">
                  <image class="shareIcon" src="@/static/sced.png" v-if="item.favorite"></image>
                  <image class="shareIcon" src="@/static/shouc.png" v-else></image>
                  <text class="shareText rtxt">收藏</text>
                </view>

                <button
                  open-type="share"
                  style="margin-top: 20rpx; background-color: transparent; border-style: none"
                >
                  <image class="shareIcon" src="@/static/fx.png"></image>
                  <!-- <p class="shareText rtxt">分享</p> -->
                </button>

                <!-- 	<view v-if="isPush" class="rightCover" @click.stop.prevent="onPush">
									<view class="shareIcon push-box">
										<image style="width: 30rpx;height: 30rpx;" src="../../static/img/fbxx.png">
										</image>
									</view>
									<text class="shareText">发布</text>
								</view> -->
              </view>
              <view class="video-info">
                <!-- <view v-if="item.spuList">
									<view v-if="item.spuList.length > 0" @click="onSee(item.spuList[0])"
										class="uploader"
										style="margin: 8rpx 0; font-size: 30rpx;padding: 5rpx;border-radius: 5rpx;">
										<text
											style="color:#ffffff; font-size: 30rpx; background-color: #666666;padding: 8rpx 13rpx;border-radius: 5rpx;">商品：
											{{item.spuList[0].name}}</text>
									</view>
								</view> -->
                <!-- <view v-if="item.shop" class="" style="display: flex; align-items: center;">
									<text class="uploader" style="color:#ffffff">@{{item.shop.name}} </text>
								</view> -->
                <view v-if="item.cityName">
                  <text
                    style="
                      color: #ffffff;
                      font-size: 30rpx;
                      background-color: #666666;
                      padding: 8rpx 13rpx;
                      border-radius: 5rpx;
                    "
                    >位置： {{ item.cityName }}</text
                  >
                </view>
                <view class="">
                  <text style="color: #ffffff; width: 750rpx; font-size: 28rpx">{{
                    item.title
                  }}</text>
                </view>
              </view>
              <!-- {{item.id}} -- {{item.heard ? "h" : ""}}  {{item.floor ? "f" : ""}}	 -->
            </view>
          </swiper-item>
        </swiper>
      </swiper-item>
    </swiper>
    <u-popup v-model="show" mode="bottom" height="800">
      <view class="wrapper">
        <view class="" style="display: flex; justify-content: center">
          <view class="nav-title-view">
            <text class="nav-title">全部评论({{ total }})</text>
            <!-- <image class="closeIcon2" src="/static/icon/close2.png" @click="hideDrawer()"></image> -->
          </view>
        </view>

        <!-- <view class="top" @click="hideDrawer()"></view> -->
        <view class="buttom-view">
          <scroll-view class="scroll-view" scroll-y @scroll="scroll" scroll-left="0">
            <view class="scroll-view-item" v-for="(item, index) in itemList" :key="index">
              <view class="comment-item" @click="onReply(item)">
                <image class="user-icon" :src="item.user.avatar" mode="aspectFill"></image>
                <view class="comment-info">
                  <text class="comment-name">{{ item.user.nickname }}</text>
                  <text class="comment-content">{{ item.content }}</text>
                  <view class="comment-time">
                    <uni-dateformat
                      :fontSize="24"
                      :date="item.createTime"
                      :threshold="[0, 3600000]"
                      color="#999"
                    ></uni-dateformat>
                    <text class="comment-reply">回复</text>
                    <text
                      class="comment-reply"
                      v-if="item.userId == userId"
                      @click.stop.prevent="onRemove(item)"
                      style="color: red"
                      >删除</text
                    >
                    <text class="comment-reply" @click.stop.prevent="onUp(item)">举报</text>
                  </view>
                </view>
              </view>
              <view
                class="comment-item2"
                v-for="(item2, index2) in item.replies"
                @click="onReply(item)"
                :key="index2"
              >
                <image class="user-icon2" :src="item2.user.avatar" mode="aspectFill"></image>
                <view class="comment-info">
                  <view class="comment-name-view">
                    <text class="comment-name">{{ item2.user.nickname }}</text>
                    <text class="comment-name" style="margin: 0px 10rpx">▶</text>
                    <text class="comment-name">{{ item2.toUser.nickname }}</text>
                  </view>
                  <text class="comment-content">{{ item2.content }}</text>
                  <view class="comment-time">
                    <uni-dateformat
                      :fontSize="24"
                      :date="item2.created_at"
                      :threshold="[0, 3600000]"
                      color="#999"
                    ></uni-dateformat>
                    <text class="comment-reply">回复</text>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="input-view" @click="onData">
          <input class="input-data" :placeholder="placeholder" v-model="comment" />
          <text class="btn-send" @click="onSend()">发送</text>
        </view>
      </view>
    </u-popup>
    <UFoooter ref="uTab"></UFoooter>
  </view>
</template>
<script>
import deepClone from 'uview-ui/libs/function/deepClone'
import UFoooter from '@/components/uTabbar.vue'
let systemInfo = uni.getSystemInfoSync()
export default {
  components: {
    UFoooter
  },
  data() {
    return {
      navIndex: 1,
      infi: false,
      items: ['item1', 'item2', 'item3', 'item4', '5', 6, 7, 8, 9, 10], // 假设我们只需要4个item
      currentIndex: 0, // 当前活动的内层swiper的索引
      historyList: [],
      historyAround: [],
      historyPageNo: 0,
      object_fit: 'contain',
      deleteHeight: 0,
      nextIndex: 1,
      nextList: [],
      myCurrent: 0,
      transform: '',
      windowWidth: 0,
      exec: false,
      debounce: '',
      status: 0,
      boxStyle: {},
      sendForm: {},
      dataList: [],
      isShare: false,
      shareVid: '',
      pause: false,
      //评论框
      show: false,
      videoid: '',
      page: 1,
      itemList: [],
      placeholder: '说点什么...',
      reply_type: 0,
      comment_id: '',
      reply_uid: '',
      comment: '',
      total: 0,
      isPush: false,
      userId: '',
      tapNum: 0,
      timeOut: '',
      statusBarHeight: systemInfo.statusBarHeight
    }
  },
  onLoad(options) {
    if (options.videId) {
      this.isShare = true
      this.shareVid = options.videId
    }
    if (uni.getStorageSync('userInfo')) {
      this.userId = uni.getStorageSync('userInfo').id
    }
    this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
    this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
    //this.wHeight = uni.getSystemInfoSync().screenHeight;//获取屏幕高度
    this.wHeight = uni.getSystemInfoSync().windowHeight //获取屏幕可用高度
    this.boxStyle.height = this.wHeight - this.deleteHeight
    this.recommendVideo()
    //代表身份
    // uni.$u.get("/app-api/member/user/get").then(res => {
    // 	if (res.data.extras.groupCode == "shop_owner" || res.data.extras.groupCode == "shop_salesman") {
    // 		this.isPush = true
    // 	}
    // })
  },
  onShareAppMessage(OBJECT) {
    return {
      title: '体育圈视频',
      imageUrl: this.dataList[this.myCurrent].coverUrl,
      path: `pages/video-list/video-list?videId=${this.dataList[this.myCurrent].id}`
    }
  },
  onShow() {
    if (this.$refs.uTab) {
      this.$refs.uTab.setCartTabBadge()
    }
  },
  methods: {
    onInnerChange(e) {
      this.status = 0
      //console.log(this.dataList[e.detail.current])
      this.$nextTick(() => {
        this.pause = false
        for (let i = 0; i < 10; i++) {
          if (i != e.detail.current) {
            this.$refs.mVideo[i].pause()
          }
        }
        this.$refs.mVideo[e.detail.current].play()
      })
      if (e.detail.current == 7) {
        uni.$u
          .get('/app-api/vlog/info/page', {
            pageNo: this.nextIndex,
            pageSize: 10
          })
          .then((res) => {
            if (res.data.list.length == 0) {
              return
            }
            this.historyList.push(res.data.list)
          })
      }

      // 	uni.$u.get("/test", {pageNo: this.nextIndex, pageSize: 10}).then(res=>{
      // 		this.historyList.push(res.data)
      // 		this.nextIndex += 1
      // })
    },
    animationfinish(e) {
      this.myCurrent = e.detail.current
      this.$nextTick(() => {
        this.pause = false
        // this.$refs.mVideo[e.detail.current].play()
      })
      //uni.createVideoContext(this.dataList[this.myCurrent].vid, this).play()
    },
    transitionY(e) {
      if (e.detail.dy > 30) {
        if (e.detail.dy > 200) {
          this.$nextTick(() => {
            this.$refs.mVideo[this.myCurrent].pause()
          })
          //uni.createVideoContext(this.dataList[this.myCurrent].vid, this).pause()
        }

        if (this.dataList[this.myCurrent]?.last) {
          this.$u.toast('到底了~开始循环')
          return
        }

        if (!this.dataList[this.myCurrent]?.floor) {
          return
        }
        if (this.status == 0) {
          this.status = 1
          this.handleNext(e)
          return
        }
      }

      if (e.detail.dy < -25) {
        if (e.detail.dy < -150) {
          this.$nextTick(() => {
            this.$refs.mVideo[this.myCurrent].pause()
          })

          //uni.createVideoContext(this.dataList[this.myCurrent].vid, this).pause()
        }
        if (!this.dataList[this.myCurrent]?.heard) {
          return
        }
        if (this.status == 0) {
          this.status = 1
          this.handleBack(e)
        }
        return
      }
    },
    handleNext(e) {
      let videoList = ''
      console.log('向下')
      let currentVideo = this.dataList[this.myCurrent]
      currentVideo.floor = false
      currentVideo.heard = true
      this.historyPageNo += 1
      videoList = deepClone(this.historyList[this.historyPageNo])
      if (videoList.length == 10) {
        videoList[9].floor = true
      } else {
        videoList[videoList.length - 1].last = true
      }

      let arr = []
      if (this.myCurrent == 0) {
        arr = [currentVideo, ...videoList]
      } else if (this.myCurrent == 1) {
        arr = [
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8]
        ]
      } else if (this.myCurrent == 2) {
        arr = [
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7]
        ]
      } else if (this.myCurrent == 3) {
        arr = [
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6]
        ]
      } else if (this.myCurrent == 4) {
        arr = [
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5]
        ]
      } else if (this.myCurrent == 5) {
        arr = [
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4]
        ]
      } else if (this.myCurrent == 6) {
        arr = [
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3]
        ]
      } else if (this.myCurrent == 7) {
        arr = [
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2]
        ]
      } else if (this.myCurrent == 8) {
        arr = [
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1]
        ]
      } else if (this.myCurrent == 9) {
        arr = [
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0]
        ]
      } else if (this.myCurrent == 10) {
        arr = [...videoList, currentVideo]
      }
      let ids = []
      // arr.forEach((item, index) => {
      // 	//item.vid = 'vid' + item.id; //初始状态标志
      // 	item.state = 'pause'; //初始状态标志
      // 	item.isShowAProgressBarTime = false; //是否显示进度条（默认这个即可）
      // 	item.playIng = true; //播放（默认这个即可）
      // 	item.isShowimage = false; //是否显示封面（默认这个即可）
      // 	item.isplay = true; //是否播放音频（默认这个即可）
      // 	item.video_format = item.url
      // 	ids.push(item.id)
      // });
      // for (let i = 0; i < videoList.length; i++) {
      this.dataList = arr
      console.log(this.dataList)
      //this.dataList = this.dataList.length == 3 ?  : [videoList[2], currentVideo, videoList[0], videoList[1]]
      // console.log(this.dataList)
    },
    handleBack(e) {
      let videoList = ''
      console.log('回去')

      // if(this.historyList[0].id == this.dataList[e].id){
      // 	console.log("到顶了")
      // }
      let currentVideo = this.dataList[this.myCurrent]
      this.historyPageNo -= 1
      this.historyPageNo =
        this.historyPageNo == -1 ? this.historyList.length - 1 : this.historyPageNo
      videoList = deepClone(this.historyList[this.historyPageNo])
      videoList[0].heard = true

      //videoList[videoList.length - 1].floor = true-

      videoList[videoList.length - 1].floor = true

      // this.dataList = videoList
      // return

      if (this.myCurrent == 0) {
        this.dataList = [currentVideo, ...videoList]
      } else if (this.myCurrent == 1) {
        this.dataList = [
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8]
        ]
      } else if (this.myCurrent == 2) {
        this.dataList = [
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7]
        ]
      } else if (this.myCurrent == 3) {
        this.dataList = [
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6]
        ]
      } else if (this.myCurrent == 4) {
        this.dataList = [
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4],
          videoList[5]
        ]
      } else if (this.myCurrent == 5) {
        this.dataList = [
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3],
          videoList[4]
        ]
      } else if (this.myCurrent == 6) {
        this.dataList = [
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2],
          videoList[3]
        ]
      } else if (this.myCurrent == 7) {
        this.dataList = [
          videoList[3],
          videoList[4],
          videoList[5],
          videoList[6],
          videoList[7],
          videoList[8],
          videoList[9],
          currentVideo,
          videoList[0],
          videoList[1],
          videoList[2]
        ]
      } else if (this.myCurrent == 8) {
        this.dataList = videoList
      } else {
        this.dataList = videoList
      }
    },
    initVideo() {
      if (!this.isShare) {
        this.$u.get('/app-api/vlog/info/browse?id=' + this.shareVid).then((res) => {
          this.dataList.unshift(res.data)
          uni.$u
            .get('/app-api/vlog/info/check-actions', {
              ids: this.shareVid
            })
            .then((res2) => {
              res2.data.forEach((item2, index) => {
                for (let item of this.dataList) {
                  if (item.id == item2.id) {
                    item.liked = res2.data[index].liked
                    item.favorite = res2.data[index].favorite
                    item.comment = res2.data[index].comment
                    item.follow = res2.data[index].follow
                    break
                  }
                }
              })
            })
          this.$nextTick(() => {
            this.pause = false
            // this.$refs.mVideo[0].play()
          })
        })
        return
      }
      this.$nextTick(() => {
        this.pause = false
        // this.$refs.mVideo[0].play()
        this.$forceUpdate()
      })
      //uni.createVideoContext(this.dataList[0].vid, this).play()
    },
    recommendVideo() {
      uni.$u
        .get('/app-api/vlog/info/page', {
          pageNo: this.nextIndex,
          pageSize: 10
        })
        .then((res) => {
          if (res.data.list.length == 0) {
            return
          }
          this.historyList.push(res.data.list)
          let ids = []
          res.data.list.forEach((item) => {
            item.vid = 'vid' + item.id
            ids.push(item.id)
          })
          this.dataList = deepClone(this.historyList[this.historyPageNo])
          uni.$u
            .get('/app-api/vlog/info/check-actions', {
              ids: ids.join(',')
            })
            .then((res2) => {
              res2.data.forEach((item2, index) => {
                for (let item of this.dataList) {
                  if (item.id == item2.id) {
                    item.liked = res2.data[index].liked
                    item.favorite = res2.data[index].favorite
                    item.comment = res2.data[index].comment
                    item.follow = res2.data[index].follow
                    break
                  }
                }
              })
            })
          if (this.nextIndex == 1) {
            this.dataList[0].top = true
          } else {
            this.dataList[0].heard = true
          }

          if (res.data.list.length == 10) {
            console.log('&&&&', res.data.list.length)
            this.dataList[this.dataList.length - 1].floor = true
          } else {
            console.log('XXX', res.data.list.length)
            this.dataList[this.dataList.length - 1].last = true
          }
          this.nextIndex += 1
          this.initVideo()
        })
    },
    touchstart(event) {
      this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
      this.dataList[this.k].isShowProgressBarTime = true //显示时间线
      this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
      this.dotWidth = 10 //让点显示起来更明显一点
    },
    touchend() {
      //当手松开后，跳到最新时间
      uni.createVideoContext(this.dataList[this.k].vid, this).seek(this.newTime)
      if (this.dataList[this.k].state == 'pause') {
        this.dataList[this.k].state = 'play'
        uni.createVideoContext(this.dataList[this.k].vid, this).play()
      }
      this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
      this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
      this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
      this.dotWidth = 0 //隐藏起来进度条，不那么明显了
    },
    touchmove(event) {
      //当手移动滑块时，计算位置、百分小数、新的时间
      var msg = []
      if (this.videoTime !== '') {
        msg = this.videoTime.split(':')
      }
      var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
      this.currentPositions = event.changedTouches[0].screenX
      this.percent = this.currentPositions / this.windowWidth
      this.newTime = this.percent * timeNumber
      this.currenttimes = parseInt(this.newTime)
      let theTime = this.newTime
      let middle = 0 // 分
      if (theTime > 60) {
        middle = parseInt(theTime / 60)
        theTime = parseInt(theTime % 60)
      }
      this.changeTime = `${Math.round(middle) > 9 ? Math.round(middle) : '0' + Math.round(middle)}:${Math.round(theTime) > 9 ? Math.round(theTime) : '0' + Math.round(theTime)}`
    },
    timeupdate(event, index) {
      //计算滑块当前位置，计算当前百分小数
      if (index == this.k) {
        var currenttime = event.detail.currentTime
        this.timeNumber = Math.round(event.detail.duration)
        this.getTime()
        this.percent = currenttime / this.timeNumber
        this.currentPosition = this.windowWidth * this.percent
        let theTime = currenttime
        let middle = 0 // 分
        if (theTime > 60) {
          middle = parseInt(theTime / 60)
          theTime = parseInt(theTime % 60)
        }
        this.changeTime = `${Math.round(middle) > 9 ? Math.round(middle) : '0' + Math.round(middle)}:${Math.round(theTime) > 9 ? Math.round(theTime) : '0' + Math.round(theTime)}`
      }
    },
    getTime() {
      //得到时间函数
      this.videoTime = this.formatSeconds(this.timeNumber)
      var msg = []
      if (this.videoTime !== '') {
        msg = this.videoTime.split(':')
      }
      this.videoTimes = `${msg[0] > 9 ? msg[0] : '0' + msg[0]}:${msg[1] > 9 ? msg[1] : '0' + msg[1]}`
    },
    formatSeconds(value) {
      //获取时间函数
      let theTime = parseInt(value) // 秒
      let middle = 0 // 分
      if (theTime > 60) {
        middle = parseInt(theTime / 60)
        theTime = parseInt(theTime % 60)
      }
      return `${middle > 9 ? middle : middle}:${theTime > 9 ? theTime : theTime}`
    },
    queryList() {
      uni.$u.get('/app-api/vlog/info/page').then((res) => {
        this.list = res.data.list
      })
    },

    touchVideo(i, e, item) {
      this.tapNum += 1
      clearTimeout(this.timeOut)
      this.timeOut = setTimeout(() => {
        this.exc(i, e, item)
      }, 200)
    },
    exc(i, event, item) {
      console.log(this.tapNum)
      if (this.tapNum > 3) {
        console.log('dddd')
        this.onLike(item)
      } else {
        if (this.$refs.mVideo[i].data.playing) {
          this.pause = true
          this.$refs.mVideo[i].pause()
        } else {
          this.pause = false
          this.$refs.mVideo[i].play()
        }
      }
      this.tapNum = 0
    },

    tapVideoHover(i) {
      this.pause = false
      this.$refs.mVideo[i].play()
    },
    playIngs(res, index) {
      this.dataList[index].playIng = true
      if (this.isVideoPlay == false) {
        this.isVideoPlay = true
        let vid = this.dataList[index].id
        // user.videoPlay({
        // 	video_id: vid
        // }, false).then(res => {
        // 	if (res && res.code == 0) {}
        // })
      }
    },

    routeTo(url) {
      uni.navigateTo({
        // url: "/other/merchant-center/merchant-center"
        url: url
      })
    },
    onLike(item) {
      console.log('vid', item.id, item.liked)
      if (item.liked) {
        uni.$u
          .post('/app-api/vlog/liked/cancel', {
            vlogId: item.id
          })
          .then((res) => {})
        item.likedCount -= 1
      } else {
        uni.$u
          .post('/app-api/vlog/liked/create', {
            vlogId: item.id
          })
          .then((res) => {})
        item.likedCount += 1
      }
      this.$nextTick(() => {
        item.liked = !item.liked
        this.$forceUpdate()
      })
    },

    onCollet(item) {
      if (item.favorite) {
        uni.$u
          .post('/app-api/vlog/favorite/cancel', {
            vlogId: item.id
          })
          .then((res) => {})
      } else {
        uni.$u
          .post('/app-api/vlog/favorite/create', {
            vlogId: item.id
          })
          .then((res) => {})
      }
      this.$nextTick(() => {
        item.favorite = !item.favorite
        this.$forceUpdate()
      })
    },
    onSeller(item) {
      if (!uni.getStorageSync('showHope')) {
        return
      }
      uni.navigateTo({
        url: '/other/merchant-center/merchant-center?id=' + item.shopId
      })
    },
    onFollow(item) {
      this.$nextTick(() => {
        item.follow = true
        this.$forceUpdate()
      })

      console.log(item)
      uni.$u
        .post('/app-api/vlog/fans/follow', {
          vlogUserId: item.user.id,
          myUserId: uni.getStorageSync('userInfo').id
        })
        .then((res) => {})
    },

    // 评论

    toComment(e) {
      this.videoid = e.id
      this.initData()
      this.show = true
    },

    onData() {},

    initData() {
      let self = this
      // user.commentsList(this.videoid, {
      // 	limit: 10,
      // 	page: this.page,
      // }, true).then(res => {
      // 	if (res && res.code == 0) {
      // 		self.total = res.total;
      // 		if (self.page == 1) {
      // 			self.itemList = res.list;
      // 		} else {
      // 			self.itemList = [...self.itemList, ...res.list];
      // 		}
      // 	}
      // });
      uni.$u
        .get('/app-api/vlog/comment/page', {
          vlogId: this.videoid
        })
        .then((res) => {
          this.total = res.data.total
          const commentList = []
          const replyList = []
          res.data.list.forEach((item) => {
            if (item.parentId == 0) {
              commentList.push(item)
            } else {
              replyList.push(item)
            }
          })

          replyList.forEach((item) => {
            commentList.forEach((item2) => {
              if (item2.id == item.parentId) {
                if (item2.replies) {
                  item2.replies.push(item)
                } else {
                  item2.replies = [item]
                }
              }
            })
          })

          if (this.page == 1) {
            this.itemList = commentList
          } else {
            this.itemList = [...this.itemList, ...commentList]
          }
        })
    },
    hideDrawer() {
      this.reply_type = 0
      this.comment_id = ''
      this.reply_uid = ''
      this.placeholder = '说点什么...'
      const subNVue = uni.getSubNVueById('storeComment')
      subNVue.hide('auto')
    },
    onReply(item) {
      this.placeholder = '回复 @' + item.user.nickname + ' :'
      this.comment_id = item.id
      this.reply_uid = item.uid
      this.reply_type = 1
    },
    onSend() {
      let self = this
      // if (!uni.getStorageSync('access_token')) {
      // 	uni.navigateTo({
      // 		url: '/universal/login/login'
      // 	});
      // 	return
      // }
      if (!this.comment) {
        uni.$u.toast('请输入内容')
        return
      }

      uni.$u
        .post('/app-api/vlog/comment/create', {
          vlogId: this.videoid,
          content: this.comment,
          parentId: this.comment_id
        })
        .then((res) => {
          uni.$u.toast('评论成功')
          self.placeholder = '说点什么...'
          this.comment = ''
          this.reply_uid = ''
          this.comment_id = ''
          setTimeout(function () {
            self.initData()
          }, 500)
        })
      return

      if (this.reply_type == 1) {
        user
          .commentReply(
            {
              comment_id: this.comment_id,
              reply_uid: this.reply_uid,
              content: this.comment
            },
            true
          )
          .then((res) => {
            if (res && res.code == 0) {
              utils.tips('回复成功')
              self.placeholder = '说点什么...'
              self.comment = ''
              setTimeout(function () {
                self.initData()
              }, 500)
            }
          })
      } else {
      }
    },
    onTabSelect(index) {
      this.navIndex = index
      this.$nextTick(() => {
        this.navIndex = index
      })
      //this.onPause();
      if (index == 0) {
        if (!this.city) {
          if (!uni.getStorageSync('address')) {
          } else {
            this.city = uni.getStorageSync('address').adress.city
            this.latitude = uni.getStorageSync('address').latitude
            this.longitude = uni.getStorageSync('address').longitude
          }
          return
        }

        this.recommendVideo()
      } else if (index == 1) {
        this.latitude = ''
        this.longitude = ''
        if (this.dataList.length == 0) {
          this.recommendVideo()
        }
      }
      // else if (index == 2) {
      // 	this.latitude = ""
      // 	this.longitude = ""
      // 	if(this.followList.length == 0){
      // 		this.followVideo();
      // 	}
      // }
    },
    onChange(event) {
      this.navIndex = event.detail.current
      console.log(this.navIndex)
      //this.onPause();
      //this.onTabSelect(this.navIndex)
    },
    onPush() {
      uni.navigateTo({
        url: '/other_center/mer-video-push/mer-video-push'
      })
    },
    onSee(e) {
      uni.navigateTo({
        url: '/goods/goods-details/goods-details?goodsId=' + e.id
      })
    },
    onRemove(e) {
      uni.dialog.confirm('温馨提示', '是否删除该评论？', () => {
        this.$u.delete('/app-api/vlog/comment/delete?commentId=' + e.id).then((res) => {
          this.$u.toast('删除成功')
          setTimeout(() => {
            this.initData()
          }, 500)
        })
      })
    },
    onUp(e) {
      uni.dialog.confirm('温馨提示', '是否举报该评论？', () => {
        this.$u.get(
          '/app-api/vlog/report/create?bizId=' +
            e.id +
            '&bizType=vlog_comment' +
            '&title=举报' +
            '&toUserId=' +
            e.userId
        )
        this.$u.toast('举报成功')
      })
    }
  }
}
</script>

<style>
.outer-swiper {
  height: 800rpx;
  /* 根据需要设置高度 */
  background-color: #888888;
  width: 100%;
  position: relative;
}

.inner-swiper {
  height: 700rpx;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  /* background-color: #fff; */
}

.body {
  flex: 1;
  background-color: #000000;
}

.custom-lb-tabbar2 {
  width: 750rpx;
  height: 100rpx;
  box-shadow: 0px -1px 4rpx 0px rgba(153, 153, 153, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  z-index: 1000;
  position: fixed;
  bottom: 0px;
}

.custom-lb-tabbar-item2 {
  flex: 1;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.custom-lb-tabbar-icon2 {
  width: 24px;
  height: 24px;
}

.custom-lb-tabbar-mid2 {
  width: 64rpx;
  height: 64rpx;
}

.custom-lb-tabbar-title2 {
  font-size: 12px;
  color: #009a74;
  margin-top: 12rpx;
}

.custom-lb-tabbar-title3 {
  font-size: 12px;
  color: #949998;
  margin-top: 12rpx;
}

.swiper-body {
  flex: 1;
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
}

.swiperItem {
  flex: 1;
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
  display: flex;
  flex-direction: column;
}

.swiperItem2 {
  flex: 1;
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
  display: flex;
  flex-direction: column;
  background: #000000;
}

.layoutView {
  flex: 1;
  /* #ifdef  H5 */
  width: 100%;
  height: 100%;
  /* #endif */
  top: 160rpx;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.tabs-view {
  flex-direction: row;
  align-items: center;
  padding: 30rpx 20rpx;
}

.tabs-view2 {
  flex: 1;
  flex-direction: column;
  margin-bottom: 120rpx;
}

.tabs-view::-webkit-scrollbar {
  /* display: none; */
  width: 0 !important;
  height: 0 !important;
  /* -webkit-appearance: none; */
  background: transparent;
}

.tabs-item {
  font-size: 28rpx;
  font-weight: 400;
  color: #009a74;
  padding: 10rpx 20rpx;
  background: #c7e8cb;
  border-radius: 24rpx;
  margin-right: 20rpx;
}

.tabs-item2 {
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
  padding: 10rpx 20rpx;
  background: #e6e6e6;
  border-radius: 24rpx;
  margin-right: 20rpx;
}

.product-list {
  padding: 20rpx;
  /* box-sizing: border-box; */
  flex-direction: row;
  margin-bottom: 150rpx;
}

.product-item {
  flex: 1;
  flex-direction: column;
}

.product-data {
  flex-direction: column;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
}

.product-img {
  height: 500rpx;
  border-radius: 10rpx 10rpx 0px 0px;
}

.product-user {
  flex-direction: row;
  align-items: center;
  padding: 10rpx 0px;
}

.like-user {
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  z-index: 100;
}

.product-user-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  margin-left: 20rpx;
}

.product-user-name {
  flex: 1;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  margin-left: 10rpx;
}

.product-collect {
  width: 28rpx;
  height: 28rpx;
}

.product-collect-num {
  font-size: 24rpx;
  font-weight: 400;
  color: #666666;
  margin-left: 10rpx;
}

.top_nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1900;
}

.top_nav .top_content {
  padding-top: 10rpx;
  flex-direction: row;
  align-items: center;
}

.top_nav .top_content .player {
  position: absolute;
  left: 20px;
  top: 35rpx;
}

.top_nav .top_content .img {
  width: 44rpx;
  height: 44rpx;
}

.top_nav .top_content .content_btn {
  flex-direction: row;
  width: 220px;
  align-items: center;
  margin-bottom: 20rpx;
}

.top_nav .top_content .content_btn .content_item {
  position: relative;
  height: 30px;
  margin-left: 30rpx;
}

.top_nav .top_content .content_btn .content_item .line_on {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #ffffff;
  bottom: 0;
  left: 2px;
  border-radius: 4upx;
}

.line_on2 {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #009a74;
  bottom: 0;
  left: 2px;
  border-radius: 4upx;
}

.top_nav .top_content .content_btn .content_item .item_title {
  color: #dcdcdc;
  font-size: 36rpx;
  /* font-weight: bold; */
}

.top_nav .top_content .content_btn .content_item .item_title2 {
  color: #009a74;
  font-size: 36rpx;
  /* font-weight: bold; */
}

.top_nav .top_content .content_btn .content_item .item_title3 {
  color: #999999;
  font-size: 36rpx;
  /* font-weight: bold; */
}

.top_nav .top_content .content_btn .content_item .item_title4 {
  color: #666;
  font-size: 36rpx;
  /* font-weight: bold; */
}

.top_nav .top_content .content_btn .content_item .i_on {
  /* font-weight: bold; */
  font-size: 38rpx;
  color: #ffffff !important;
}

.top_nav .top_content .content_btn .content_item .i_on2 {
  /* font-weight: bold; */
  font-size: 38rpx;
  color: #009a74 !important;
}

.top_nav .top_content .search {
  position: absolute;
  right: 20px;
  top: 35upx;
}

.logins {
  width: 80upx;
  height: 40upx;
  margin-top: 80upx;
  margin-bottom: 30upx;
}

.left_dubbedText {
  color: #ffffff;
  font-size: 15px;
  flex-direction: row;
  margin-top: 16rpx;
}

.left_dubbedText_text {
  color: #eee;
  font-size: 15px;
  line-height: 50upx;
}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

.item {
  background-color: #000000;
  position: relative;
}

.videoHover {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  flex: 1;
  background-color: rgba(0, 0, 0, 0.1);
  justify-content: center;
  align-items: center;
}

.playState {
  width: 160rpx;
  height: 160rpx;
  opacity: 0.7;
}

.userInfo {
  height: 690rpx;
  position: absolute;
  bottom: 330rpx;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatarView {
  display: flex;
  flex-direction: column;
  position: relative;
}

.userAvatar {
  width: 86rpx;
  height: 86rpx;
  border-radius: 500%;
  margin-bottom: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
}

.add {
  position: absolute;
  bottom: 15upx;
  left: 24rpx;
  color: white;
  font-size: 28upx;
  width: 34upx;
  height: 34upx;
  background: #f12f5b;
  border-radius: 50%;
  text-align: center;
  line-height: 36upx;
  font-weight: bold;
}

.coverFollow {
  width: 68rpx;
  height: 68rpx;
}

.followNum {
  color: #ffffff;
  margin-top: 5px;
  font-size: 14px;
  text-align: center;

  font-weight: bold;
}

.likeIco {
  width: 60rpx;
  height: 60rpx;
  margin-top: 15px;
}

.commentIcon {
  width: 60rpx;
  height: 60rpx;
}

.rightCover {
  opacity: 0.9;
  margin-top: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rtxt {
  margin-left: 10rpx;
}

.shareIcon {
  width: 60rpx;
  height: 60rpx;
}

.shareText {
  color: #ffffff;
  margin-top: 5px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

.commentNum {
  color: #ffffff;
  margin-top: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.likeNum {
  color: #ffffff;
  font-size: 30rpx;
  text-align: center;
  margin: 5px;
}

.content {
  width: 720rpx;
  z-index: 99;
  position: absolute;
  bottom: 120rpx;
  padding: 15rpx;
  flex-direction: column;
  justify-content: flex-start;
  color: #ffffff;
}

.userName {
  font-size: 34rpx;
  color: #ffffff;
  margin-top: 80upx;
  font-weight: bold;
}

.words {
  margin-top: 16rpx;
  font-size: 30rpx;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
}

.root {
  background-color: #000000;
}

.coverimage {
  width: 120upx;
  height: 160upx;
  border-radius: 10upx;
  position: absolute;
}

.nullView {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 150rpx 0px;
}

.nullImage {
  width: 410rpx;
  height: 240rpx;
}

.nullTitle {
  font-size: 28rpx;
  font-weight: 400;
  color: #b2b3b8;
  margin-top: 30rpx;
}

.wrapper {
  /* flex: 1;
		flex-direction: column;
		text-align: center;
		background-color: transparent; */
  /* position: relative; */
}

.top {
  /* background-color: #000; */
  /* opacity: 0.1; */
}

.buttom-view {
  height: 606rpx;
  /* background-color: #FFF;
		flex-direction: column;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px; */
}

.nav-title-view {
  padding: 20rpx 0;
  /* flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 30rpx 0px;
		border-bottom: 1px solid #f5f5f5; */
}

.nav-title {
  font-size: 35rpx;
  color: #333;
}

.closeIcon2 {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  right: 30rpx;
}

.scroll-view {
  max-height: 636rpx;
}

.scroll-view-item {
  width: 750rpx;
}

.comment-item {
  width: 750rpx;
  padding: 10px;
  display: flex;
}

.comment-item2 {
  width: 650rpx;
  padding: 10px;
  display: flex;
  margin-left: 100rpx;
}

.comment-item:active {
  background: #f5f5f5;
}

.comment-item2:active {
  background: #f5f5f5;
}

.user-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user-icon2 {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
}

.comment-info {
  flex: 1;
  flex-direction: column;
  margin-left: 20rpx;
}

.comment-name {
  font-size: 26rpx;
  color: #666;
}

.comment-name-view {
  flex-direction: row;
}

.comment-content {
  font-size: 30rpx;
  color: #333;
  margin: 10rpx 0px;
}

.comment-time {
  flex-direction: row;
  align-items: center;
}

.comment-reply {
  font-size: 24rpx;
  color: #333;
  margin-left: 20rpx;
}

.input-view {
  width: 750rpx;
  height: 100rpx;
  background: #fff;
  box-shadow: 0px -1px 4rpx 0px rgba(153, 153, 153, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.input-data {
  flex: 1;
  height: 70rpx;
  background: #f5f5f5;
  border-radius: 35rpx;
  font-size: 30rpx;
  color: #333;
  padding: 0px 20rpx;
  margin-left: 30rpx;
}

.btn-send {
  width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background: #0f76bb;
  border-radius: 35rpx;
  font-size: 32rpx;
  color: #fff;
  margin: 0rpx 30rpx;
}

.push-box {
  width: 60rpx;
  height: 60rpx;
  border: #fefefe 5rpx solid;
  border-radius: 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-info {
  position: absolute;
  bottom: 200rpx;
  color: #fff;
  z-index: 999;
  font-size: 35rpx;
  font-weight: 700;
  width: 620rpx;
}
</style>
